<template>
  <div>
    <leftPanel
      id="leftPanel"
      style="width:72px"
      @openClose="openCloseEdit"
    ></leftPanel>
    <centerPanel
      id="centerPanel"
      :style="{
        width: centerWidth,
        left: centerLeft + 'px'
      }"
    ></centerPanel>
    <rightPanel id="rightPanel" @shousuo="shousuoWidth"></rightPanel>
  </div>
</template>

<script>
import leftPanel from "./leftPanel";
import centerPanel from "./centerPanel";
import rightPanel from "./rightPanel";
import { mapGetters } from "vuex";

export default {
  components: {
    leftPanel,
    centerPanel,
    rightPanel
  },
  name: "lxwbody",
  data() {
    return {
      rightTabW: 56,
      leftTabW: 72,
      centerWidth: "calc(100% - 128px)",
      // centerWidth: "100%",
      centerLeft: 0
    };
  },
  computed: {
    ...mapGetters(["leftState", "rightState"])
  },
  created() {},
  mounted() {},
  watch: {
    //监视界面变化
    "$store.state.app.leftState"() {
      this.parseWidth();
    },
    "$store.state.app.rightState"() {
      this.parseWidth();
    }
  },
  methods: {
    openCloseEdit(parm) {
      console.log(parm, "parm");
      if (parm == false) {
        this.centerLeft = 0;
      } else {
        this.centerLeft = 304;
      }
    },
    shousuoWidth(val) {
      console.log(val, "子组件的宽");
    },
    parseWidth() {
      //计算出来外部的大小
      this.centerWidth = `calc(100% - ${(this.leftState ? 376 : 72) +
        (this.rightState ? 208 : 56)}px)`;
    }
  }
};
</script>

<style scoped>
#app #container > div {
  float: left;
  position: relative;
  height: 100%;
}
#leftPanel {
  height: 100%;
  width: 376px;
  position: relative;
  float: left;
  z-index: 8;
}
#rightPanel {
  height: 100%;
  z-index: 8;
  background: #ffffff;
  box-shadow: -10px 0 20px 0 rgba(0, 0, 0, 0.04);

  position: fixed !important;
  top: 56px !important;
  right: 0 !important;
}
</style>
